<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* html {
      background-color: #13283e;
    } */

    .loading-inner {
      width: 180px;
      height: 180px;
      background-color: #d0f4ff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      animation: loadingBreath 5s infinite;
    }

    @keyframes loadingBreath {
      0% {
        box-shadow: 0 0 5px 0 #85f7fb;
      }

      25% {
        box-shadow: 0 0 20px 0 #85f7fb;
      }

      50% {
        box-shadow: 0 0 5px 0 #85f7fb;
      }

      75% {
        box-shadow: 0 0 20px 0 #85f7fb;
      }

      100% {
        box-shadow: 0 0 5px 0 #85f7fb;
      }
    }

    .loading-inner::before {
      content: '启动中';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
      color: #10a7b9;
      font-size: 18px;
      letter-spacing: 2px;
      font-family: sans-serif;
    }

    .loading-inner::after {
      content: '';
      width: 100%;
      height: 25%;
      background-image: linear-gradient(to top, #12c8e0, #36e9ff, #5ffbf1);
      position: absolute;
      bottom: 0;
      animation: loadingRun 2s ease-in-out infinite;
    }

    @keyframes loadingRun {
      0% {
        height: 25%;
      }

      100% {
        height: 100%;
      }
    }


    .loading-cover::before {
      content: '';
      position: absolute;
      left: -50%;
      width: 200%;
      height: 200%;
      z-index: 10;
      background-color: #85f7fb;
      border-radius: 52% 25% 62% 69% / 25% 38%;
      animation: loadingWave 5s ease-in-out infinite;
    }

    .loading-cover::after {
      content: '';
      position: absolute;
      left: -50%;
      width: 200%;
      height: 200%;
      z-index: 20;
      background-color: #d0f4ff;
      border-radius: 42% 38% 40% 62% / 48% 35%;
      animation: loadingWave 5s linear infinite;
    }

    @keyframes loadingWave {
      0% {
        top: -100%;
        transform: rotate(0);
      }

      100% {
        top: -200%;
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="loading-inner">
    <div class="loading-cover"></div>
  </div>
</body>

</html>